<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第五天作业</title>
    <link rel="stylesheet" href="./css/css.css">
</head>
<body>
    <!-- 标题栏 -->
    <header>
        <span class="sp1">Simple Magazine </span><span class="sp2"> / News</span>
    </header>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <li class="li ccc">News
                <aside class="li_top">
                    <img src="./img/navigation-arrow.gif" alt="">
                </aside>
                <div>
                    <ul>
                        <li class="li1">Frotpage</li>
                        <li class="li1">style Domo</li>
                        <li class="li1">Two Columns</li>
                        <li class="li1">Aingle Column</li>
                        <li class="li1">Archives</li>
                        <li class="li1">Empty Page</li>
                    </ul>
                </div>
            </li>
            <li class="li">Politics
                <aside>
                    <img src="./img/navigation-arrow.gif" alt="">
                </aside>
                <div>
                    <ul>
                        <li class="li1">Frotpage</li>
                        <li class="li1">style Domo</li>
                        <li class="li1">Two Columns</li>
                        <li class="li1">Aingle Column</li>
                        <li class="li1">Archives</li>
                        <li class="li1">Empty Page</li>
                    </ul>
                </div>
            </li>
            <li class="li">Culture
                <aside>
                    <img src="./img/navigation-arrow.gif" alt="">
                </aside>
                <div>
                    <ul>
                        <li class="li1">Frotpage</li>
                        <li class="li1">style Domo</li>
                        <li class="li1">Two Columns</li>
                        <li class="li1">Aingle Column</li>
                        <li class="li1">Archives</li>
                        <li class="li1">Empty Page</li>
                    </ul>
                </div>
            </li>
            <li class="li">Sport
                <aside>
                    <img src="./img/navigation-arrow.gif" alt="">
                </aside>
                <div>
                    <ul>
                        <li class="li1">Frotpage</li>
                        <li class="li1">style Domo</li>
                        <li class="li1">Two Columns</li>
                        <li class="li1">Aingle Column</li>
                        <li class="li1">Archives</li>
                        <li class="li1">Empty Page</li>
                    </ul>
                </div>
            </li>
            <li class="li">Deate
                <aside>
                    <img src="./img/navigation-arrow.gif" alt="">
                </aside>
                <div>
                    <ul>
                        <li class="li1">Frotpage</li>
                        <li class="li1">style Domo</li>
                        <li class="li1">Two Columns</li>
                        <li class="li1">Aingle Column</li>
                        <li class="li1">Archives</li>
                        <li class="li1">Empty Page</li>
                    </ul>
                </div>
            </li>
            <li class="li">Entertainment
                <aside>
                    <img src="./img/navigation-arrow.gif" alt="">
                </aside>
                <div>
                    <ul>
                        
                        <li class="li1">Frotpage</li>
                        <li class="li1">style Domo</li>
                        <li class="li1">Two Columns</li>
                        <li class="li1">Aingle Column</li>
                        <li class="li1">Archives</li>
                        <li class="li1">Empty Page</li>
                    </ul>
                </div>
            </li>
        </ul>
    </nav>
    <article>
        <section class="left_text">
            <aside class="left_top left_11">
                <h2>Template Information</h2>
                <p class="top_p1">18:11 , Sunday , àugust 2 , 2009 Ъy Viktor Persson</p>
                <img src="./img/news-image-big.jpg" alt="">
                <p>This is a free website template by Arcsin, built using tableless YHTML and CSS.</p>
                <p>This template is distributed under a Creative Commons Attribution 2.5 License , which allows you to use and modify it for any purpose(personal and commercial) ,under the condition that you keep the prowided credit links in the footer.</p>
                <p>The latest template version and CMS conversions for platforms such as WordPress and Blogger can be found at the official page.</p>
                <p>Fоr mоrе tеmрlаtеs, questions аnd соmumеnts рlеаsе visit Arcsin Web Templates.
                </p>
                <p>Have fun!</p>
                <span>Road more >></span>
            </aside>
            <aside class="left_down left_11">
                <section class="left_down_left left_22">
                    <img src="./img/news-image-med-1.jpg" alt="">
                    <h5>Curabitur just to arcu</h5>
                    <p>Bibendum at bibendum in semper nec ibh.</p>
                </section >
                <section class="left_down_min left_22">
                    <img src="./img/news-image-med-2.jpg" alt="">
                    <h5>Donec sodal es</h5>
                    <p>Duis risus lectus, gravidaeu scelerisque.
                    </p>
                </section>
                <section class="left_down_right left_22">
                    <img src="./img/news-image-med-3.jpg" alt="">
                    <h5>Donec rhoncus</h5>
                    <p>Donec eget congue libero</p>
                </section>
            </aside>
        </section>
        <section class="min_text">
            <aside class="min11 min22">
                <img src="./img/news-image-small-1.jpg" alt="">
                <h3>Article title</h3>
                <p>Integer di am elit, condimentum ac semper ut, tincidunt non diam. Ut congue rutrum justo at commodo. Aenean eui smod tinci dunt lorem sceler isque eui smod.</p>
                <span>Road more >></span>

            </aside>
            <aside class="min11">
                <img src="./img/news-image-small-2.jpg" alt="">
                <h3>Second Article Title</h3>
                <p>Integer di am elit, condimentum ac semper ut, tincidunt non diam. Ut congue rutrum justo at commodo. Aenean eui smod tinci dunt lorem sceler isque eui smod.
                </p>
                <span>Road more >></span>
            </aside>
            <aside class="min11">
                <h3>Third title</h3>
                <p>Integer di am elit, condimentum ac semper ut, tincidunt non diam. Ut congue rutrum justo at commodo. Aenean eui smod tinci dunt lorem sceler isque eui smod.
                </p>
                <span>Road more >></span>
            </aside>
        </section>
        <section class="right_text">
            <aside class="right11">
                <h4>Latest News</h4>
                <ul class="right_ul1">
                    <li>Archives Empty Page</li>
                    <li>Justo inter dum rutrum</li>
                    <li>In nec justo in urna</li>
                    <li>Accumsan condimentum</li>
                    <li>Eti am commodo bibendum</li>
                    <li>Mauris eui smod justo</li>
                </ul>
                <ul class="right_ul2">
                    <li><img src="./img/icon-time.gif" alt=""></li>
                    <li>20:49</li>
                    <li>20:40</li>
                    <li>19:56</li>
                    <li>19:15</li>
                    <li>19:06</li>
                    <li>18:51</li>
                </ul>
                <span>Browse all >></span>
            </aside>
            <aside class="right22" >
                <h4>Most Viewed</h4>
                <ul>
                    <li>1.Archives Empty Page</li>
                    <li>2.Justo inter dum rutrum</li>
                    <li>3.In nec justo in urna</li>
                    <li>4.Accumsan condimentum</li>
                    <li>5.Etiam commodo bibendum</li>
                    <li>6.Mauris eui smod justo</li>
                    <li>7.Mauris eui smod justo</li>
                    <li>8.Mauris eui smod justo</li>
                </ul>
                <span>Browse all >></span>
            </aside>
            <aside class="right33">
                <h4>Network News</h4>
                <ul>
                    <li>Archives Empty Page</li>
                    <li>Justo inter dum rutrum</li>
                    <li>In nec justo in urna</li>
                    <li>Accumsan condimentum</li>
                    <li>Eti am commodo bibendum</li>
                </ul>
                <span>Visit Network Site >></span>
            </aside>
        </section>
    </article>
     <!--最下部本-->
        <section class="last_box">
            <aside >
                <div class="last_box1">
                    <h3>About Simple Magazine</h3>
                    <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
                    <a href="">Learn more >></a>
                </div>
            </aside>
            <aside >
                <div class="last_box2">
                <h3>Follow Us (RSS)</h3>
                <ul class="last_ul">
                    <li>
                        <img src="./img/icon-feed.gif" alt=""><br>
                        <img src="./img/icon-feed.gif" alt=""><br>
                        <img src="./img/icon-feed.gif" alt=""><br>
                        <img src="./img/icon-feed.gif" alt=""><br>
                    </li>
                    <li class="last_li">
                        <a href="">Lorem ipsum</a><br>
                        <a href="">Dolor sit amet</a><br>
                        <a href="">Consectetur</a><br>
                        <a href="">Adipicing elit</a><br>
                    </li>
                </ul>
            </div>
            </aside>
            <aside >
                <div class="last_box3">
                <h3>Help & support</h3>
                <p>Quam velit dapibus quam,ornare suscipit tortor nisl ut tellus.</p>
                <a href="">Frequently Asked Questions (FAQ) >></a>
            </div>
            </aside>
            <aside >
                <div class="last_box4">
                <h3>Get in touch</h3>
                <p>phone: +12 3456 7890 <br>Email:dolor@sit.amet</p>
                <a href="">Online contact form >></a>
            </div>
            </aside>
        </section>
    <footer>
        <section class="footer_top">
            <aside class="footer_top_aside">
                <span class="footer_span">Simple Magazine &rarr;</span>
                <ul class="footer_ul">
                    <li class="li999">Home</li>
                    <li>News</li>
                    <li>Politics</li>
                    <li>Culture</li>
                    <li>Sport</li>
                    <li>Debate</li>
                    <li>Entertainment</li>
                </ul>
            </aside>
            <aside><span>Poular free web templates </span></aside>
            <aside><span>website template by Arcsin</span></aside>
        </section>
        <section class="footer_down">
            <span>www.WebsiteTemplatesOnline.com. Impressive Flash Temlates for websites.</span>
        </section>
    </footer>
</body>
</html>